<template>
  <q-layout view="lHh Lpr lFf" class="bg-grey-2">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round @click="toggleLeftDrawer" icon="menu" aria-label="Menu" />
        <q-space />
        <div class="q-gutter-sm row items-center no-wrap">
          <q-btn round dense flat color="white" :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
            @click="$q.fullscreen.toggle()" v-if="$q.screen.gt.sm">
          </q-btn>
          <!-- <q-btn round dense flat color="white" icon="notifications">
            <q-badge color="red" text-color="white" floating>
              5
            </q-badge>
            <q-menu>
              <q-list style="min-width: 100px">
                <messages></messages>
                <q-card class="text-center no-shadow no-border">
                  <q-btn label="View All" style="max-width: 120px !important;" flat dense class="text-indigo-8"></q-btn>
                </q-card>
              </q-list>
            </q-menu>
          </q-btn> -->
          <q-btn-dropdown v-model="avatarMenu" align="center" class="custom-dropdown">
            <template #label>
              <q-btn round class="p-0">
                <q-avatar size="26px">
                  <img src="https://cdn.quasar.dev/img/boy-avatar.png">
                </q-avatar>
              </q-btn>
            </template>
            <q-list>
              <q-item clickable v-close-popup @click="onItemClick">
                <q-item-section>
                  <q-item-label style="text-align: center;">退出登录</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered class="bg-primary text-white">
      <div class="flx-center pt10 pb10">
        <div class="title-img">
          <img :src="iconImage" />
        </div>
        <div class="title-text">河木科技</div>
      </div>
      <q-list>
        <q-expansion-item v-for="item in menuVoList" :icon="item.icon" :label="item.label">
          <q-list class="q-pl-lg">
            <q-item v-for="subItem in item.children" :to="`/${subItem.route}`" active-class="q-item-no-link-highlighting">
              <q-item-section avatar>
                <q-icon :name="subItem.icon" />
              </q-item-section>
              <q-item-section>
                <q-item-label>{{subItem.menuText}}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-expansion-item>

        <!-- <q-expansion-item icon="pages" label="Pages">
          <q-list class="q-pl-lg">
            <q-item to="/Login-1" active-class="q-item-no-link-highlighting">
              <q-item-section avatar>
                <q-icon name="email" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Login-1</q-item-label>
              </q-item-section>
            </q-item>

          </q-list>
        </q-expansion-item> -->
      </q-list>
    </q-drawer>

    <q-page-container class="bg-grey-2">
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent, ref, computed, watchEffect, watch, onMounted } from 'vue'
import { useQuasar } from "quasar";
import { useRouter } from 'vue-router';
import { useUserStore } from 'src/stores/modules/user';
import iconImage from 'src/assets/image/logo.jpg'
import { MenuListIconsMap, MenuListIconsMap_Parent } from 'src/common/const';


export default defineComponent({
  name: 'MainLayout',

  setup() {
    const userStore = useUserStore()
    const router = useRouter()
    const leftDrawerOpen = ref(false)
    const $q = useQuasar()
    const avatarMenu = ref(false)
    const onItemClick = () => {
      userStore.setUserData({})
      router.replace('/login')
    }
    // 判断是否是中小屏
    const isSm = computed(() => {
      return $q.screen.lt.sm || $q.screen.lt.md
    })
    watch([() => isSm.value, () => leftDrawerOpen.value], () => {
      setTimeout(() => {
        // 如果是中小屏或者关闭menu 则如此
        if (isSm.value || !leftDrawerOpen.value) {
          const pageBox = document.getElementsByClassName('q-page-container') || [{}]
          pageBox[0].style.paddingLeft = '0px'
        } else {
          const pageBox = document.getElementsByClassName('q-page-container') || [{}]
          const headerBox = document.getElementsByClassName('q-header') || [{}]
          pageBox[0].style.paddingLeft = '250px'
          headerBox[0].style.left = '250px'
        }
      }, 0);
    })

    const groupArrayIntoPairs = (arr) => {
      const pairs = [];
      let parentIndex = 0
      for (let i = 0; i < arr.length; i += 2) {
        const parentRoute = MenuListIconsMap_Parent.get(`${parentIndex}`)
        pairs.push({
          ...parentRoute,
          children: [arr[i], arr[i + 1]]
        });
        parentIndex++;
      }
      return pairs;
    }
    const menuVoList = computed(() => {
      return groupArrayIntoPairs(userStore.userData.menuVoList.map(item => {
        return {
          ...item,
          icon: MenuListIconsMap.get(item.route)
        }
      }))
    })
    return {
      $q,
      avatarMenu,
      leftDrawerOpen,
      onItemClick,
      iconImage,
      menuVoList,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
})
</script>

<style lang="scss">
/* FONT AWESOME GENERIC BEAT */
.fa-beat {
  animation: fa-beat 5s ease infinite;
}

@keyframes fa-beat {
  0% {
    transform: scale(1);
  }

  5% {
    transform: scale(1.25);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.25);
  }

  50% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.25);
  }

  70% {
    transform: scale(1);
  }
}

.title-img {
  width: 32px;
  height: 32px;

  img {
    width: 100%;
    height: 100%;
  }
}

.title-text {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-left: 10px;
}

.custom-dropdown .material-icons.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container {
  display: none !important;
}

.p-0 {
  padding: 0 !important;
}

.q-item-no-link-highlighting {
  background-color: rgba(15, 23, 42, 0.9);
}
</style>
